import React, { useState, useEffect, useRef } from 'react';
import { connect } from 'umi';
import { Card } from 'antd'
import Management from './components/enterpriseManagement';
import Role from './components/role';

const system = (props) => {
  const { departmentList, loading, dispatch } = props;
  const [activeKey, setActiveKey] = useState('management');
  const tabList = [
    { key: 'management', tab: '员工管理' },
    { key: 'role', tab: '角色管理' },
  ];
  const contentList = {
    management: <Management></Management>,
    role: <Role></Role>,
  };
  return (
    <Card
      onTabChange={(e) => {
        setActiveKey(e);
      }}
      activeTabKey={activeKey}
      tabList={tabList}
    >
      {contentList[activeKey]}
    </Card>
  );
};

export default connect(({ system, loading }) => ({
  ...system,
  loading: loading.models.system,
}))(system);
